import { useState } from 'react';
import { Button } from 'antd-mobile';

const ResourceErrorDemo = () => {
	const [isResources, setIsResources] = useState(false);

	const toggleResources = () => {
		setIsResources(!isResources);
	};

	return (
		<div style={{ padding: 16 }}>
			{/* Error images */}
			<img
				src='error.png'
				alt='Error image'
				style={{ display: 'block', marginBottom: 16, maxWidth: '100%' }}
			/>

			{isResources && (
				<>
					<img
						src='error1.png'
						alt='Additional error image'
						style={{ display: 'block', marginBottom: 16, maxWidth: '100%' }}
					/>

					{/* Audio element */}
					<audio
						controls
						autoPlay
						loop
						style={{ display: 'block', width: '100%', marginBottom: 16 }}
					>
						<source src='xxx.mp3' type='audio/mpeg' />
						Your browser does not support the audio element.
					</audio>

					{/* Video element */}
					<video
						controls
						autoPlay
						loop
						style={{ display: 'block', width: '100%', marginBottom: 16 }}
					>
						<source src='xxx.mp4' type='video/mp4' />
						Your browser does not support the video tag.
					</video>
				</>
			)}

			<Button color='primary' size='middle' onClick={toggleResources} block>
				切换
			</Button>
		</div>
	);
};

export default ResourceErrorDemo;
